<template>
  <div>
    <van-nav-bar title="编辑地址" fixed>
      <div class="left_arrow" @click="()=>{ $router.go(-1) }" slot="left">
        <van-icon name="arrow-left"/>
        <span>返回</span>
      </div>
    </van-nav-bar>
    <!-- 地址表单 -->
    <van-address-edit
      :area-list="areaList"
      show-postal
      show-delete
      show-set-default
      show-search-result
      :search-result="addressResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
      @change-detail="onChangeDetail"
      :address-info="addressInfo"
    />
  </div>
</template>

<script>
import areaList from "../../assets/area.js";
import { mapState } from "vuex";
export default {
  data() {
    return {
      areaList,
      searchResult: [],
      // 查询到的修改地址对象
      addressInfo: {},
      addressResult: [""]
    };
  },
  created() {
    this.getEditIndex();
  },
  methods: {
    onSave(content) {
      // console.log(content);
      content.id = window.sessionStorage.getItem("editId");
      this.$store.commit("setAddress", content);
      this.$router.push("/address_list");
      this.$toast.success();
    },
    onDelete() {
      this.toast("delete");
    },
    onChangeDetail(val) {
      console.log(val);
      // if (val) {
      //   this.addressResult = [
      //     {
      //       name: "黄龙万科中心",
      //       address: "杭州市西湖区"
      //     }
      //   ];
      // } else {
      //   this.searchResult = [];
      // }
    },
    // 拿到要修改的地址详细信息
    getEditIndex() {
      let i = window.sessionStorage.getItem("editId");
      console.log(i);
      let index = this.addressList.findIndex(item => item.id == i);
      console.log(index);
      console.log(this.addressList[index]);
      this.addressInfo = this.addressList[index];
    }
  },
  computed: {
    ...mapState(["addressList"])
  }
};
</script>

<style lang="less" scoped>
</style>